<template>
	<div class="example-3d">
	  <swiper class="swiper" :options="swiperOption">
		<swiper-slide><img src="../../assets/images/swiper1.jpg" alt=""></swiper-slide>
		<swiper-slide><img src="../../assets/images/swiper2.jpg" alt=""></swiper-slide>
		<swiper-slide><img src="../../assets/images/swiper3.jpg" alt=""></swiper-slide>
		<swiper-slide><img src="../../assets/images/swiper4.jpg" alt=""></swiper-slide>
		<swiper-slide><img src="../../assets/images/swiper5.jpg" alt=""></swiper-slide>
		<swiper-slide><img src="../../assets/images/swiper6.jpg" alt=""></swiper-slide>
		
		<!-- <div class="swiper-pagination" slot="pagination"></div> -->
	  </swiper>
	</div>
  </template>
  
  <script>
	import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
  
	export default {
	  name: 'swiper-example-3d-coverflow',
	  title: '3D Coverflow effect',
	  components: {
		swiper,
		swiperSlide
	  },
	  data() {
		return {
		  swiperOption: {
			autoplay: {
				delay:3000,
				stopOnLastSlide: false,
                disableOnInteraction: false
			},
			speed: 1000,
			effect: 'coverflow',
			grabCursor: true,
			centeredSlides: true,
			slidesPerView: 'auto',
			coverflowEffect: {
			  rotate: 50,
			  stretch: 0,
			  depth: 100,
			  modifier: 1,
			  slideShadows : true
			},
			pagination: {
			  el: '.swiper-pagination'
			}
		  }
		}
	  }
	}
  </script>
  
  <style lang="scss" scoped>
	.example-3d {
	  width: 100%;
	  height: 300px;
	  padding-top: 5px;
	  padding-bottom: 5px;
	}
  
	.swiper {
	  height: 100%;
	  width: 100%;
  
	  .swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		height: 300px;
		text-align: center;
		font-weight: bold;
		// font-size: $font-size-huge * 2;
		background-color: #2C8DFB;
		background-position: center;
		background-size: cover;
		color: white;
	  }
  
	  .swiper-pagination {
		::v-deep .swiper-pagination-bullet.swiper-pagination-bullet-active {
		  background-color: white;
		}
	  }
	}
  </style>